<template>
  <div class="kaoqinIndexContainer">
    <!--车辆报警开始-->
    <warnMessage v-if="currIndex==0"></warnMessage>
    <!--车辆报警结束-->
    <!--人员开始-->
    <peopleMessage v-if="currIndex==1"></peopleMessage>
    <!--人员结束-->
    <!--tabbar开始-->
    <van-tabbar v-model="active" active-color="#07c160" inactive-color="#000">
      <van-tabbar-item
        v-for="(item,index) in tabbarList"
        :key="index"
        @click="Changetab(index,item.name)"
      >
        <span :class="currIndex == index ? active:''">{{item.text}}</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? item.active : item.normal" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <!--tabbar结束-->
  </div>
</template>
<script>
import warnMessage from "./warnMessage";
import peopleMessage from "./peopleMessage";

export default {
  components: { warnMessage,peopleMessage},
  data() {
    return {
      currIndex: 0,
      active: 0,
      tabbarList: [
        {
          name: "home",
          text: "车辆信息",
          normal: require("../../../static/image/alet_car_hui.png"),
          active: require("../../../static/image/alet_car.png")
        },
        {
          name: "count",
          text: "人员信息",
          normal: require("../../../static/image/alet_person_hui.png"),
          active: require("../../../static/image/alet_person.png")
        },
        
      ]
    };
  },
  methods: {
    Changetab(index, val) {
      this.currIndex = index;
    }
  }
};
</script>
<style lang="less" scoped>
.active_tab img {
  width: 26px;
  height: 26px;
}

</style>